/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-09-13 09:48:59
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-15 17:17:01
 * @FilePath: /vuecli508-datav/src/components/ui/ol-map/mixin/judgePolygonWithCenterIn.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Overlay } from 'ol';
export default {
    data() {
        return {
            infoOverlayNsp: {
                layer: null, // 信息框
                popupClass: 'default-style',
                leaveWillClose: false, // 是否开始鼠标离开信息框后延时关闭信息框
                willCloseInfoWindow: false,
                infoType: undefined
            }
        };
    },
    methods: {
        // 弹窗 option { lng, lat, info: { title?, content?, class?, html? }[], popupClass?, data? }
        openInfo(option) {
            if (this.infoOverlayNsp.layer === null) {
                const container = document.getElementById('ol-popup');
                this.infoOverlayNsp.layer = new Overlay({
                    element: container,
                    autoPan: true,
                    positioning: 'bottom-center'
                });
                this.map.addOverlay(this.infoOverlayNsp.layer);
            }
            let html = '';
            if (
                !['slot', 'teleport'].includes(option.infoType) &&
                option.info &&
                option.info.length > 0
            ) {
                option.info.forEach((item) => {
                    if (item.title) {
                        html += `<div class="item ${item.class || ''}">${
                            item.title
                        }${
                            item.content !== undefined
                                ? `：${item.content}</div>`
                                : '</div>'
                        }`;
                    } else if (item.html) {
                        html += `<div class="item ${item.class || ''}">${
                            item.html
                        }</div>`;
                    }
                });
                const contentDom = document.getElementById('ol-popup-content');
                if (contentDom) {
                    contentDom.innerHTML = html;
                } else {
                    throw 'info是空数组的时候，请使用的slot方式';
                }
                setTimeout(() => {
                    const dom = document.querySelector('.ol-popup');
                    dom.addEventListener('click', (e) =>
                        this.$emit('tapInfoWindow', {
                            event: e,
                            option,
                            data: option.data
                        })
                    );
                    if (this.infoOverlayNsp.leaveWillClose) {
                        dom.addEventListener(
                            'mouseenter',
                            this.enterBoundaryCloseInfoWindow
                        );
                        dom.addEventListener(
                            'mouseleave',
                            this.leaveBoundaryCloseInfoWindow
                        );
                    }
                }, 200);
            }
            this.infoOverlayNsp.infoType = option.data.infoType;
            if (option.popupClass) {
                this.infoOverlayNsp.popupClass = option.popupClass;
            } else {
                this.popupClass = 'default-style';
            }
            this.infoOverlayNsp.layer.setPosition([+option.lng, +option.lat]);
        },
        enterBoundaryCloseInfoWindow() {
            this.infoOverlayNsp.$emitwillCloseInfoWindow = false;
        },
        leaveBoundaryCloseInfoWindow() {
            this.infoOverlayNsp.willCloseInfoWindow = true;
            setTimeout(() => {
                if (this.infoOverlayNsp.willCloseInfoWindow) {
                    this.infoOverlayNsp.layer.setPosition();
                }
            }, 2000);
        },
        closeInfo() {
            this.infoOverlayNsp.layer.setPosition();
        }
    }
};
